<template>
  <div class="device_control_box">
    <div class="position_box">
      <span>江苏电力大数据设备查询入口</span>
    </div>
    <div>
      <a-input-search
          v-model:value="searchValue"
          placeholder="请输入设备编号"
          style="width: 200px"
          @search="onSearch"
      />
    </div>
    <a-button style="margin-top: 3rem" type="primary" @click="join_platform">进入江苏电力大数据平台</a-button>
  </div>
</template>

<script>
import {ref} from "vue"
import {useRouter} from "vue-router"
import {message} from "ant-design-vue";
import {useStore} from "vuex"
import {encryption} from "@/utils/base64";

export default {
  name: "device_control_join",
  setup() {
    const router = useRouter();
    const store = useStore()
    store.commit("SET_SCREEN", true)
    const searchValue = ref('HJKLY4010068')
    const onSearch = () => {
      if (searchValue.value) {
        router.push({
          path: "/index/cockpit/device_data_details", query: {
            uEquipmentCode: encryption(searchValue.value),
            status: "江苏电力"
          }
        })
      } else {
        message.error("设备编码不能为空")
      }
    }
    const join_platform = ()=>{
      router.push({path: "/index/cockpit/data_analysis"})
    }
    return {
      onSearch,
      searchValue,
      join_platform
    }
  }
}
</script>

<style scoped lang="scss">
.device_control_box {
  position: relative;
  background: url("http://www.newhlty.tz-group.com/img/bg.82f8f7db.png") no-repeat top center;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  align-items: center;
  flex-direction: column;

  .position_box {
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    color: white;
  }
}
</style>
